import { App , createApp } from "vue";

import loginDialogEE from "./loginDialog.vue";
// 第一步  创建一个插件对象
// let loginInter :App | null = null
// let loginElement :HTMLElement | null = null
const loginDialogPlugin = {
    //注册指令 方法 组件等
    install(app:App){
    //在app上面注册 这个引入的组件
    app.component('loginDialogEE', loginDialogEE)
    // 在vue原型注册通用的方法 
    app.config.globalProperties.$showLoginDialog = (isNeedLogin:boolean=true)=>{
      if (isNeedLogin){
        let loginInstance = createApp(loginDialogEE) //创建实例
        //创建DOM容器  
        let loginEl = document.createElement('div')
        loginEl.id = 'loginDialog'
        // 1. body添加这个容器 DOM树 先有容器 才能 添加这些实例  
        //  这个组件 如果添加的地方 不和整体的 vue在一个 dom下面  无法访问到 vue的实例 包括调用创建他的方法
        document.getElementById('app')?.appendChild(loginEl)
        // 添加这个实例  实例添加到 DOM容器
        loginInstance.mount(loginEl)
      }else{
          document.getElementById('loginDialog')?.remove()
      }
    }

    // 自定义指令 根据指令 v-login 把这个调用 v-login的dom元素color改成了红色 也可以在这个dom中创建节点等
    app.directive('login', {
    beforeMount(el){
      console.log('创建前执行',el);
      el.style.color = 'red'
    // let loginInstance = createApp(loginDialogEE) //创建实
    // let loginEl = document.createElement('div')
    // loginEl.id = 'loginDialogAAAA'

    // // 1. body添加这个容器 DOM树 先有容器 才能 添加这些实例
    // document.body.appendChild(loginEl)
    // // 添加这个实例  实例添加到 DOM容器
    // loginInstance.mount(loginEl)

    }
    })

    // 全局方法 / 全局自定义指令  + 全局组件 结合起来 = 全局插件


  }
}

export default  loginDialogPlugin ;